<script setup lang="ts">
import { ref, watch } from 'vue';
import { useNavbarStore } from '../store/navbar';
import { useUserStore } from '../store/user';
import { useCartStore } from '../store/cartStore';
import DefaultLayout from '../layouts/DefaultLayout.vue'
import * as PetsShoppingApi from '../apis/shopping.ts'
import { SearchCondition } from '../apis/shopping.ts'
import { useRoute, useRouter } from 'vue-router'

const navbarStore = useNavbarStore()
const userStore = useUserStore()
const cartStore = useCartStore()
const route = useRoute()
const router = useRouter()

const type = ref(0)
const variety = ref('全部')
const value = ref([0, 20000])

const minValue = ref()
const maxValue = ref()
const priceRangeVisible = ref(false)

var search = ref<SearchCondition>({
    search: route.query.keyWord,
    pageNo: 1,
    pageSize: 12
} as SearchCondition)
const toDetail = (item)=>{
    router.push(`/goods/detail/${item}`)
}

const categoryData = ref([])
const secondCategoryData = ref()

const goodsList = ref([])
const visible = ref(false)

//获取商品分类
const getgoodsCategory = () => {
    PetsShoppingApi.getGoodsCategory()
        .then(res => {
            console.log(res);
            categoryData.value = res.data
        })
        .catch(res => {
            console.log(res);
        })
}
getgoodsCategory()

//获取商品列表
const getGoodsListByCategory = (flag: boolean) => {
    PetsShoppingApi.getData(search.value)
        .then(res => {
            goodsList.value = res.data
            if (goodsList.value.list.length != 0 && flag) {
                visible.value = true
                priceRangeVisible.value = true

                value.value[0] = Math.min(...goodsList.value.list.map(p => p.minPrice))
                value.value[1] = Math.max(...goodsList.value.list.map(p => p.maxPrice))

                //价格最大值最小值
                minValue.value = value.value[0]
                maxValue.value = value.value[1]
            }
            else if (goodsList.value.list.length == 0) {
                visible.value = false
                priceRangeVisible.value = false
            }
        })
}
getGoodsListByCategory(true)

/*
*点击一级目录
*/
//点击全部
const clickAllCategory = () => {
    search = ref<SearchCondition>({
        pageNo: 1,
        pageSize: 12
    } as SearchCondition)
    getGoodsListByCategory(true)
}

//点击非全部
const clickGoodCategory = (item) => {
    variety.value = '全部'
    search = ref<SearchCondition>({
        searchPc: item.pcId,
        pageNo: 1,
        pageSize: 12
    } as SearchCondition)
    secondCategoryData.value = item.attributes[0]
    search.value.searchPc = item.pcId
    getGoodsListByCategory(true)
}


watch(categoryData, () => {
    console.log(categoryData.value)
    handleRedirect()
})

const handleRedirect = () => {
    if (route.query.type !== undefined) {
        type.value = route.query.type
        clickGoodCategory(categoryData.value.find(item => item.pcId == route.query.type))
        router.replace({ name: 'PetsShopping', query: {} })
    }
}


/*
*点击二级目录
*/
//点击全部
const clickAllSecondCategory = () => {
    search = ref<SearchCondition>({
        searchPc: type.value,
        pageNo: 1,
        pageSize: 12
    } as SearchCondition)
    getGoodsListByCategory(true)
}


//点击非全部
const clickGoodSecondCategory = (item) => {
    search.value.searchAttr = item.avContent
    search.value.pageNo = 1
    console.log(search.value);
    getGoodsListByCategory(true)
}

//筛选价格
const priceRange = () => {
    search.value.minPrice = String(value.value[0])
    search.value.maxPrice = String(value.value[1])
    getGoodsListByCategory(false)
}

//删除相关搜索
const clearSearch = () => {
    router.replace({ name: 'PetsShopping', query: {} })
    search.value.search = ''
    getGoodsListByCategory(true)
}

/*
*删除最大最小限制
*/
//删除最大
const clearMax = () => {
    search.value.maxPrice = ''
    getGoodsListByCategory(true)
}
//删除最小
const clearMin = () => {
    search.value.minPrice = ''
    getGoodsListByCategory(true)
}

//换页
const changePage = (currentPage: number) => {
    search.value.pageNo = currentPage
    getGoodsListByCategory(true)
}

const updatePage = (page) => {
    navbarStore.setActiveMenu(page)
    if (page !== '/') navbarStore.setDropmenuVisible(true)
    else navbarStore.setDropmenuVisible(false)
}

const test = () => {
    // navbarStore.setShoppingCar(true)
    // cartStore.getCartList(userStore.id)
    // console.log(cartStore.cartList);
    // console.log(type.value)
    const goods = ref({
        cgNum: 1,
        cgPrice: 138,
        goodsSpecsId: 17,
        userId: 2
    })
    cartStore.addToCart(goods.value)
}

const log = (num: number) => {
    console.log('这是一段测试');
    console.log(num);
}


</script>

<template>
    <DefaultLayout>
        <div class="mx-40 my-8">

            <el-breadcrumb class="mb-6" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }" @click="updatePage('/')">首页</el-breadcrumb-item>
                <el-breadcrumb-item>宠物商城</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="search w-full">
                <div class="line_1 flex w-full bg-white ">
                    <div class="type_title bg-[#f2f3f4] border border-slate-200 flex items-center ">
                        <div class="pl-5"> 分类 </div>
                    </div>
                    <div class=" type_content flex items-center border border-slate-200">
                        <el-radio-group v-model="type" size="large" text-color="#ffffff" fill="#d0021b"
                            class="mx-5 gap-4">
                            <el-radio-button :value=0 @click="clickAllCategory">
                                <template #default>
                                    <div class="flex justify-center items-center border-none rounded-none h-2">
                                        <div class="text-sm"> 全部 </div>
                                    </div>
                                </template>
                            </el-radio-button>
                            <el-radio-button v-for="item in categoryData" :key="item" :label="item.pcName"
                                :value="item.pcId" @click="clickGoodCategory(item)">
                                <template #default>
                                    <div class="flex justify-center items-center h-2">
                                        <div class="text-sm"> {{ item.pcName }} </div>
                                    </div>
                                </template>
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <div v-if="type !== 0" class="line_2 flex w-full bg-white">
                    <div class="type_title bg-[#f2f3f4] border border-slate-200 flex items-center ">
                        <div class="pl-5"> {{ secondCategoryData.akName }} </div>
                    </div>
                    <div class="type_content border border-slate-200 flex items-center ">
                        <el-radio-group v-model="variety" size="large" text-color="#ffffff" fill="#d0021b"
                            class="mx-5 gap-4 border-none">
                            <el-radio-button value='全部' @click="clickAllSecondCategory()">
                                <template #default>
                                    <div class="flex justify-center items-center border-none rounded-none h-2">
                                        <div class="text-sm"> 全部 </div>
                                    </div>
                                </template>
                            </el-radio-button>
                            <el-radio-button v-for="item in secondCategoryData.values" :key="item"
                                :value="item.avContent" @click="clickGoodSecondCategory(item)">
                                <template #default>
                                    <div class="flex justify-center items-center h-2">
                                        <div class="text-sm"> {{ item.avContent }} </div>
                                    </div>
                                </template>
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <div v-if="priceRangeVisible" class="line_3 flex w-full bg-white h-24">
                    <div class="type_title_price bg-[#f2f3f4] border border-slate-200 flex">
                        <div class="pl-5 pt-4"> 价格 </div>
                    </div>
                    <div class="type_content_price border border-slate-200">
                        <div class="slider-block ml-8 w-4/5 mt-2">
                            <el-slider v-model="value" range :min="minValue" :max="maxValue" />
                        </div>
                        <div class="mx-10 my-1 flex justify-between items-center">
                            <p class="text-xs text-slate-500 ">价格:{{ value[0] }} ~ {{ value[1] }} ¥</p>

                            <button class="bg-[#dc2626] text-white w-16 h-7 rounded-sm hover:opacity-75 transition duration-300 ease-in-out" @click="priceRange">
                                筛选
                            </button>
                        </div>
                    </div>
                </div>

                <div class="keyWord flex w-full bg-white">
                    <div class="type_title_price bg-[#f2f3f4] border border-slate-200 flex">
                        <div class="pl-5 py-4"> 筛选条件 </div>
                    </div>
                    <div class="type_content_price border border-slate-200 flex">
                        <div v-if="search.search" class="bg-[#dc2626] text-white m-6 py-1 px-2 text-sm flex">
                            <button class="clearButton flex justify-center items-center" @click="clearSearch">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-3 h-3">
                                    <path
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
                                </svg>
                            </button>
                            <p class="ml-1">相关搜索: {{ search.search }} </p>
                        </div>
                        <div v-if="!(search.minPrice == '' || search.minPrice == null)"
                            class="bg-[#dc2626] text-white m-6 py-1 px-2 text-sm flex">
                            <button class="clearButton flex justify-center items-center" @click="clearMin">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-3 h-3">
                                    <path
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
                                </svg>
                            </button>
                            <p class="ml-1"> 最小价格¥ {{ search.minPrice }}.00 </p>
                        </div>
                        <div v-if="!(search.maxPrice == '' || search.maxPrice == null)"
                            class="bg-[#dc2626] text-white m-6 py-1 px-2 text-sm flex">
                            <button class="clearButton flex justify-center items-center" @click="clearMax">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-3 h-3">
                                    <path
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
                                </svg>
                            </button>
                            <p class="ml-1"> 最大价格¥ {{ search.maxPrice }}.00 </p>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="visible" class="ListCard w-full">
                <div class="text-slate-500 my-6">
                    <p>第 {{ goodsList.pageNo }} 页, 共 {{ goodsList.pages }} 页</p>
                </div>

                <div class="grid grid-cols-4 gap-5 mt-4">
                    <div v-for="item in goodsList.list" :key="item"
                        class="rounded-md bg-white col-span-1 p-4 border-2 hover:border-[#d0021b] transition duration-300 ease-in-out"
                        @click="toDetail(item.goodsId)">
                        <div class="flex justify-center items-center">
                            <img class="rounded-lg w-full h-full object-cover p-3" :src="item.goodsPhoto" />
                        </div>
                        <p class="text-center mt-2">{{ item.goodsName }}</p>
                        <p class="text-center text-red-500 mt-1">¥ {{ item.minPrice }}</p>
                    </div>
                </div>

                <div class="pagination w-full flex justify-center mt-8">
                    <el-pagination background layout="prev, pager, next" :page-size="12" :total="goodsList.total"
                        @current-change="changePage" />
                </div>

            </div>
            <div v-else class="post-loop-empty flex flex-col justify-center items-center w-full my-44">
                <img class="h-44 w-44" src="../assets/image/goodsEmpty.svg" alt="empty">
                <p class="text-slate-400 mt-3">没有找到符合要求的产品</p>
            </div>
            <div>

            </div>

        </div>
    </DefaultLayout>
</template>

<style scoped>
.type_title {
    height: 3rem;
    width: 12%;
}

.type_content {
    height: 3rem;
    width: 88%
}

.type_title_price {
    width: 12%;
}

.type_content_price {
    width: 88%
}
</style>